<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="assets/css/user.css"/>
    <script src="assets/js/axios-0.18.0.js"></script>
    <script src="assets/js/vuejs-2.5.16.js"></script>
    <link rel="stylesheet" href="assets/elementui/index.css">
    <script src="assets/elementui/index.js"></script>
    <script src="assets/js/jquery-3.3.1.min.js"></script>
<!--    <script src="assets/js/qs.js"></script>-->
</head>
<body>

<div id="app">
    <div id="save">
        <button><a href="save.html">新增用户</a></button>
    </div>

    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>邮箱</th>
            <th>删除操作</th>
            <th>修改操作</th>
        </tr>
<!--        v-model="userInfo"-->
        <tr v-for="user in userList" :model="userInfo">
            <td v-html="user.id" :model="userInfo.id" name="userId">100</td>
            <td v-html="user.userName"  :model="userInfo.userName" name="userName">admin</td>
            <td v-html="user.realName"  :model="userInfo.realName">用户1</td>
            <td v-html="user.age"  :model="userInfo.age">22</td>
            <td v-html="user.sex"  :model="userInfo.sex">男</td>
            <td v-html="user.birthday"   :model="userInfo.birthday">2012-12-12</td>
            <td v-html="user.email"  :model="userInfo.email">tps@163.com</td>
            <td><button @click="deleteUser(user.id)">删除</button></td>
            <td><button @click="updateUserById(user)">修改</button></td>
        </tr>
    </table>
</div>
</body>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            userList:[], //用户的查询结果列表
            userInfo:{
                userName:"",
                realName:"",
                age:"",
                sex:"",
                birthday:"",
                email:""
            } //用户信息,双向绑定
        },
        methods:{
            deleteUser(id){
                let that = this;
                console.log("id = ", id);
                axios.get("/deleteUser",{"params":{"userId":id}})
                    .then(response=>{
                        console.log("id = ", id);
                        console.log("response = ", response);
                        //重新请求当前页面
                        location.href="user.html";
                    })
            },
            findAll(){
                axios.get("/findall")
                    .then(response=>{
                        console.log("response = ", response);
                        this.userList=response.data;
                    });
            },
            save(){
                // let params=`user=${this.userInfo}`;
                axios.get("/save",{"params":user})
                    .then(response=>{
                        console.log("response = ", response);
                        location.href="user.html";
                    })
            },
            updateUserById(user){
                console.log("user = ",user);
                //{"params":{"user":user}}
                axios.get("/updateUserById",{"params":user})
                    .then(response=>{
                        // console.log("response = ", response)
                        location.href="user.html";//刷新页面，也可以重新加载当前函数
                    })
            }
        },
        created(){
            //页面加载完成--》查询所有
            this.findAll();
        }
    });
</script>

</html>